<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪酬管理</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 20px;
        }

        .table-container {
            margin-top: 20px;
            width: 100%;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        table th {
            background-color: #f2f2f2;
        }

        button {
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>薪酬数据管理</h1>

    <!-- 查询所有薪酬数据 -->
    <button id="loadSalariesBtn">加载薪酬数据</button>

    <!-- 薪酬数据表格 -->
    <div class="table-container">
        <table id="salaryTable">
            <thead>
            <tr>

                <th>薪酬标准ID</th>
                <th>基本工资</th>
                <th>补助资金</th>
                <th>养老保险</th>
                <th>失业保险</th>
                <th>医疗保险</th>
                <th>住房公积金</th>
                <th>奖励金</th>
                <th>扣除金</th>
                <th>个人薪酬</th>
                <th>操作</th>
                <th>姓名</th>
            </tr>
            </thead>
            <tbody>
            <!-- 数据将通过JavaScript动态填充 -->
            </tbody>
        </table>
    </div>
</div>

<script>
    window.onload = function () {
        fetch("api/salaries/")  // 获取数据
            .then(response => response.json())  // 获取JSON格式的数据
            .then(data => {
                console.log(data.data);  // 打印返回的完整数据结构，确认是否有name字段

                // 获取表格的tbody元素
                let tableBody = document.getElementById('salary-table-body');

                // 清空表格内容（避免重复渲染）
                tableBody.innerHTML = '';

                // 渲染数据到表格
                data.data.forEach(salary => {
                    console.log(salary.name);  // 确认 name 字段是否存在

                    // 创建一行
                    let row = document.createElement('tr');

                    // 对于每一列，创建对应的input框，并填充相应的数据
                    let columns = [
                        { value: salary.name, readonly: true },  // 姓名
                        { value: salary.salary_id, readonly: true },
                        { value: salary.total_salary, readonly: true },
                        { value: salary.allowance, readonly: true },
                        { value: salary.pension_insurance, readonly: true },
                        { value: salary.unemployment_insurance, readonly: true },
                        { value: salary.medical_insurance, readonly: true },
                        { value: salary.housing_fund, readonly: true },
                        { value: salary.bonus, readonly: false, dataField: "bonus", dataId: salary.salary_id },
                        { value: salary.dock, readonly: false, dataField: "dock", dataId: salary.salary_id },
                        { value: salary.hr_salary, readonly: true }
                    ];

                    // 为每一列创建对应的input框
                    columns.forEach(column => {
                        let cell = document.createElement('td');
                        let input = document.createElement('input');
                        input.type = "number";  // 统一使用数字输入框
                        input.classList.add("form-control");

                        // 设置读取和编辑状态
                        input.value = column.value;
                        input.readOnly = column.readonly;

                        // 为奖励金和扣除金添加额外属性
                        if (!column.readonly) {
                            input.setAttribute('data-id', column.dataId);
                            input.setAttribute('data-field', column.dataField);
                        }

                        // 将input添加到当前单元格
                        cell.appendChild(input);
                        row.appendChild(cell);
                    });

                    // 将新行添加到tbody中
                    tableBody.appendChild(row);
                });

                // 为表格单元格添加click事件监听器
                tableBody.addEventListener('click', function(event) {
                    const target = event.target;
                    if (target.tagName.toLowerCase() === 'input') {
                        // 获取当前输入框的value值
                        const inputValue = target.value;

                        // 如果value为空，弹出提示框提示无数据，否则显示实际值
                        if (inputValue === '') {
                            alert('该格子没有数据！');
                        } else {
                            alert(`当前格子填入的值为：${inputValue}`);
                        }
                    }
                });

                // 为“奖励金”和“扣除金”添加事件监听
                tableBody.addEventListener('input', function(event) {
                    const target = event.target;
                    if (target.tagName.toLowerCase() === 'input') {
                        const salaryId = target.getAttribute('data-id');
                        const field = target.getAttribute('data-field');
                        const value = target.value;

                        // 你可以在这里更新表格或发送请求给后端以保存修改
                        console.log(`Salary ID: ${salaryId}, Field: ${field}, New Value: ${value}`);
                    }
                });
            })
            .catch(error => {
                console.error('请求失败:', error);  // 请求错误时的错误提示
            });
    };
</script>


</body>
</html>

